import React, { Component } from 'react'
import './index.scss'
import { Icon } from 'antd';
import Bikan from './bikan'
import Jingxuan from './jingxuan'
import Nvzhuang from './nvzhuang'
import Xiebao from './xiebao'
import Nanzhuang from './nanzhuang'
import Sports from './sports'
import $ from 'jquery'

export default class index extends Component {
  constructor(){
    super()
    this.state={
      oneIndex:0,
      scrollTop:0
    }
  }
  componentDidMount(){
    this.handleScroll()
  }
  render() {
    const {oneIndex} = this.state
    return (
      <div className='home' onWheel={this.handleScroll}>
        <div className='headBg'>
          <div className='focus-banner main'>
            <div className='focus-banner-con'>
              <ul className='oneImg'>
                <li style={{opacity:oneIndex === 0 ? '1':'0'}}><img src='https://a.vpimg2.com/upload/flow/2020/01/10/160/15786468211008.jpg' alt='' /></li>
                <li style={{opacity:oneIndex === 1 ? '1':'0'}}><img src='https://a.vpimg2.com/upload/flow/2020/01/10/116/15786474637472.jpg' alt='' /></li>
                <Icon type="left" className='left' onClick={this.handleClickChangeIndex1}/>
                <Icon type="right" className='right' onClick={this.handleClickChangeIndex2}/>
              </ul>
              <div className='two'>
                <ul>
                  <li onMouseEnter={this.handleChangeOneindex1} className={oneIndex === 0 ? 'current': '' }>水星家纺品牌巨献 抢99元乳胶对枕</li>
                  <li onMouseEnter={this.handleChangeOneindex2} className={oneIndex === 1 ? 'current': '' }>年货集市 全场18元起</li>
                </ul>
                <div className='two-huakuai' style={{'left':356+oneIndex*229}}></div>
              </div>
            </div>
          </div>
        </div>
        {/* 轮播横幅广告 */}
        <Bikan></Bikan>
        <Jingxuan></Jingxuan>
        <Nvzhuang></Nvzhuang>
        <Xiebao></Xiebao>
        <Nanzhuang></Nanzhuang>
        <Sports></Sports>
      </div>
    )
  }
  handleChangeOneindex1=()=>{
    this.setState({
      oneIndex:0
    })
  }
  handleChangeOneindex2=()=>{
    this.setState({
      oneIndex:1
    })
  }
  handleClickChangeIndex1=()=>{
    this.setState({
      oneIndex:0
    })
  }
  handleClickChangeIndex2=()=>{
    this.setState({
      oneIndex:1
    })
  }
  handleScroll=(event)=>{
    let scrollTop  = document.documentElement.scrollTop;
    var res= $('#jingxuan').position().top
    if(scrollTop>res){
      $('.daohang').css({
        'top':scrollTop-res+100
      })
    }else{
      $('.daohang').css({
        'top': 0
      })
    }
  }
}
